<template>
    <view class="con">
        <view class="con-stall">
            <view class="con-stall-num">
                <view>
                    <text>{{data.service_info ?data.service_info.service_name :'未知' }}</text>
                </view>
                <view>
                    <button @click="handelShowDialog" type="primary" size="mini" plain>筛选品类</button>
                </view>
                <view>
                    <button @click="toInfo" type="primary" size="mini" plain>查看记录</button>
                </view>
            </view>
            <view class="con-stall-quan">
                <view>
                    <text>入库：{{data.in || 0}}笔</text>
                </view>
                <view>
                    <text>出库：{{data.out || 0}}笔</text>
                </view>
                <view>
                    <text>退回：{{data.back || 0}}笔</text>
                </view>

            </view>
        </view>
        <view class="mymoney" style="height: auto;">
            <view class="service-box">
                <view @click ="toServiceStorage(1)" class="fc">
                    <image class="box-img"  src="@/static/img/myhome/yuanliao.png"></image>
                    <view  class="tc">出库</view>
                </view>
                <view @click ="toServiceStorage(2)" class="fc">
                    <image class="box-img"  src="@/static/img/myhome/feipin.png"></image>
                    <view  class="tc">入库</view>
                </view>
                <view @click ="toServiceStorage(3)" class="fc">
                    <image class="box-img" src="@/static/img/myhome/chengpin.png"></image>
                    <view class="tc">退回</view>
                </view>
            </view>
        </view>

        <view class="con-list">
            <view>
                <text>品名</text>
                <text>库存</text>
            </view>
            <view v-for="(item,index) in data.list" :key="index" :class="index%2 == 0 ? 'other-color':''">
                <text>{{item.goods_name}}{{$u.test.isEmpty(item.wpsize) ? '' : item.wpsize}}</text>
                <text>{{item.total_nums}}</text>
            </view>
        </view>

        <u-popup v-model="popupShow" mode="right" length="80%">
            <view style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
                <view>
                    <view class="popup-list">
                        <view v-for="(item, index) in timeList" :key="index" @click="handTime(item)">
                            <text :class="[item.select ? 'popup-list-text' : '']">{{item.title}}</text>
                        </view>
                    </view>
                    <view style="display: flex;align-items: center;justify-content: center;">
                        <u-button :type="is_custom ? 'warning':''" @click="showDate" plain>{{date_text}}</u-button>
                    </view>
                </view>

                <view class="popup-button">
                    <view class="popup-button-reset" @click="reset()">重置</view>
                    <view class="popup-button-define" @click="define()">确定</view>
                </view>
            </view>

            <u-calendar v-model="show_range" :mode="mode" @change="changeDate"></u-calendar>

        </u-popup>

        <well-tree-select @doConfirm="doConfirmCategorys" :showDialog.sync="showDialog" :data="categorysList" :key="key"
            :title-text="'选择品类'" :max-selected="2" :selected-ids="selectedIds">
        </well-tree-select>
    </view>
</template>

<script>
    import wellTreeSelect from "../../../../components/well-treeSelect/well-treeSelect.vue";
    export default {
        components: {
            wellTreeSelect
        },
        data() {
            return {
                selectedValues: [],
                categorysList: [],
                showDialog: false,
                selectedItemsStr: '',
                house_id:3,
                data:{},
                first:null,
                secend:null,
                service_init:{}
            }
        },
        onShow() {
            this._getWp()
            this._getInit()
            this._getStatistics();
        },
        methods: {
            handelShowDialog() {
                this.first_index = null
                this.secend_index = null
                this.showDialog = true;
            },
            doConfirmCategorys(items) {
                let first = null
                if(items[0] != null){
                    this.first = this.categorysList[items[0]].value
                }else{
                    this.first = null
                }
                let secend = null
                if(items[1] != null){
                    this.secend = this.categorysList[items[0]]['children'][items[1]].value
                }else{
                    this.secend = null
                }
                this._getStatistics()
            },
            _getWp() {
                let params = {};
                params.house_id = this.house_id
                this.$u.api.getServiceWp(params).then(res => {
                    this.categorysList = res
                })
            },
            _getInit(){
                this.$u.api.getServiceInit().then(res => {
                    this.service_init = res
                    uni.setStorageSync('service_init',res)
                })
            },
            _getStatistics() {
                uni.showLoading({
                    title: '加载中'
                });
                let params = {};
                params.house_id = this.house_id
                params.cate = [this.first,this.secend]
                this.$u.api.getServiceStatistics(params).then(res => {
                    this.data = res;
                    uni.hideLoading();
                })
            },
            toInfo(){
                uni.navigateTo({
                    url:'/homepage/Test/Home/myhome/service/receipt?house_id='+this.house_id
                })
            },
            toServiceStorage(type){
                //设置类型
                let weigh_type = null
                if(this.house_id == 3){
                     weigh_type = this.service_init.weigh_type.waste
                }
                if(!weigh_type){
                    uni.showToast({
                        title:'获取过磅方式失败，请重新进入',
                        icon:'none',
                    })
                    return
                }
                if(type == 1){
                    //出库
                    uni.setStorageSync('weigh_type',weigh_type.out)
                }
                if(type == 2){
                    //入库
                    uni.setStorageSync('weigh_type',weigh_type.in)
                }
                if(type == 3){
                    //退回
                    uni.setStorageSync('weigh_type',weigh_type.back)
                }
                let title = '废品库'
                uni.navigateTo({
                    url:'/homepage/Test/Home/myhome/service/storage?handle_type='+type +'&house_id='+this.house_id +'&title=' +title
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
    .other-color {
        background-color: aliceblue
    }

    .con {
        width: 100%;
        // height: 100vh;
        // background-color: #fff;

        .con-stall {
            background-color: #fff;

            //display: flex;
            .con-stall-num {
                display: flex;
                padding-top: 30rpx;
                justify-content: space-between;

                view {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    width: 33%;

                    text {}

                    .con-stall-num-i {
                        margin-bottom: 10rpx;
                        color: #ffc362;
                        font-size: 35rpx;
                        font-weight: bold;
                    }
                }
            }

            .con-stall-quan {
                display: flex;
                padding: 30rpx 0;
                justify-content: space-between;

                view {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    min-width: 33%;

                    text {}
                }
            }
        }

        .con-list {
            background-color: #FFFFFF;
            margin-top: 30rpx;

            view {
                display: flex;
                justify-content: space-between;
                border-bottom: 1rpx solid #f7f7f7;
                padding: 30rpx;
            }
        }

        .popup-list {
            display: flex;
            flex-wrap: wrap;

            view {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 33%;
                height: 100rpx;

                text {
                    padding: 10rpx 40rpx;
                    background-color: #e9eaeb;
                }

                .popup-list-text {
                    color: #ffb83c;
                    background-color: #fff4e6;
                }
            }

        }

        .popup-button {
            display: flex;
            padding-bottom: env(safe-area-inset-bottom);

            view {
                width: 50%;
                height: 100rpx;
                text-align: center;
                line-height: 100rpx;
                font-size: 30rpx;
            }

            .popup-button-reset {
                background-color: #f0f6ff;
            }

            .popup-button-define {
                background-color: #ff9e15;
                color: #FFFFFF;
            }
        }
    }
    .mymoney {
        position: relative;
        width: 630rpx;
        height: 220rpx;
        background-color: #fffef4;
        border-radius: 20rpx;
        border: solid 2rpx #f7f5e0;
        margin: 61rpx 60rpx;
    
        .mymoneyson {
            margin: 53rpx 43rpx;
    
            .mymon {
                font-family: PingFang-SC-Bold;
                font-size: 28rpx;
                font-weight: normal;
                font-stretch: normal;
                line-height: 29rpx;
                letter-spacing: 0rpx;
                color: #846252;
            }
    
            .mymonn {
                font-family: PingFang-SC-Heavy;
                font-size: 40rpx;
                font-weight: normal;
                font-stretch: normal;
                line-height: 29rpx;
                letter-spacing: 0rpx;
                color: #ff4200;
                margin-top: 34rpx;
    
                .text-style-1 {
                    font-family: PingFang-SC-Heavy;
                    font-size: 70rpx;
                    font-weight: normal;
                    letter-spacing: 0rpx;
                    color: #ff4200;
                }
            }
    
            .sebutton {
                position: absolute;
                top: 75rpx;
                right: 40rpx;
                width: 190rpx;
                height: 70rpx;
                background-image: linear-gradient(90deg,
                        #ffca4b 0%,
                        #ff4200 100%),
                    linear-gradient(#ff5400,
                        #ff5400);
                background-blend-mode: normal,
                    normal;
                box-shadow: 0rpx 15rpx 30rpx 0rpx rgba(255, 68, 1, 0.25);
                border-radius: 35rpx;
                font-family: PingFang-SC-Bold;
                font-size: 28rpx;
                line-height: 70rpx;
                letter-spacing: 0rpx;
                color: #ffffff;
            }
    
            .sanj {
                position: absolute;
                top: 97rpx;
                right: 40rpx;
                width: 0;
                height: 0;
                border: 14rpx solid #0000FF;
                border-color: transparent transparent transparent #FFFFFF;
            }
        }
    
    }
    .service-box{
        display: flex;justify-items: center;justify-content: space-around;margin: 20rpx;
    }
    .box-img{
        width: 100rpx;height: 100rpx;
    }
    .fc{
        display: flex;
            flex-direction: column;
            align-items: center;
    }
</style>
